<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <title>Content Manager</title>
</head>

<body>
    <script src="https://unpkg.com/decap-cms@3.0.0/dist/decap-cms.js"></script>

    <!-- Decap CMS preview pane script -->
    <!-- Edit this script to customize the preview pane for your blog posts.  -->
    <!-- Documentation: https://decapcms.org/docs/customization/ -->
    <script type="text/babel">
        const BlogPreview = createClass({
            render: function () {
                // Get all the props from the collection
                const data = this.props.entry.get("data").toJS();
                const { title, author, date: rawDate, image } = data;
                const date = typeof rawDate === "string" ? new Date(rawDate) : rawDate;
                let formattedDate = "";
                if (date) {
                    formattedDate = Intl.DateTimeFormat("en-US", {
                        month: "long",
                        day: "numeric",
                        year: "numeric"
                    }).format(date);
                }

                const cover = this.props.getAsset(image);

                // Create elements for the preview pane in JSX, to be processed by Babel
                return (
                    <div className="blog">
                        <h1 className="title">{title}</h1>

                        <div className="metadata">
                            <span className="author">{author}</span>
                            <span className="dot"></span>
                            <span className="date">{formattedDate}</span>
                        </div>

                        <img src={cover?.toString()} className="cover" alt="Cover" />

                        <hr className="divider" />

                        <div className="markdown">
                            {this.props.widgetFor("body")}
                        </div>
                    </div>
                );
            }
        });

        // Register the elements and styles for the "blog" collection
        CMS.registerPreviewTemplate("blog", BlogPreview);
        CMS.registerPreviewStyle("/admin/decap-preview-styles.css");
    </script>
</body>

</html>
